import React, { Component } from "react";
// 导入connect，用于连接store
import { connect } from "react-redux";
// 导入css
import "@/assets/css/ProductDetail.css";
import { Button, Card } from "antd";

class ProductDetail extends Component {
  state = {
    detail: {},
  };

  render() {
    return (
      <div>
        <Button onClick={this.goBack}>返回产品列表</Button>&emsp; 详细信息
        <div style={{ width: "100%", marginTop: "20px" }}>
          <div
            className="site-card-border-less-wrapper"
            style={{ width: "100%" }}
          >
            <Card title="Card title" bordered={false} style={{ width: "100%" }}>
              <div className="col">
                <div>
                  <b>商品名称:</b>&emsp;<span>{this.props.data.data.name}</span>
                </div>
                <div>
                  <b>商品描述:</b>&emsp;<span>{this.props.data.data.desc}</span>
                </div>
                <div>
                  <b>商品价格:</b>&emsp;
                  <span>￥{this.props.data.data.price}</span>
                </div>
                <div>
                  <b>商品图片:</b>&emsp;
                  <span>
                    <div>
                      {this.props.data.data.imgs ? (
                        "暂无图片"
                      ) : (
                        <>
                        </>
                      )}
                    </div>
                  </span>
                </div>
                <div>
                  <b>商品详情:</b>&emsp;
                  <div style={{ width: "300px" }}>
                    {this.props.data.data.detail}
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    );
  }
  goBack = () => {
    this.props.history.goBack();
  };

}

export default connect(
  (state) => ({ data: state.productGetDate }),
  {}
)(ProductDetail);
